<template>
  <div class="list-page">
    <div class="list-page-container">
      <el-tabs v-model="activeName" type="card" @tab-click="tabsChangeClick">
        <el-tab-pane label="邀请购买" name="first">
          <!--<el-col :span="24" class="action-bar">
            <el-button type="primary" size="medium" style="margin-left:20px;" @click="addBtnReset">添加</el-button>
          </el-col>-->

          <el-table stripe :data="tableData" v-loading="tableLoadingShow" element-loading-text="加载中" style="width: 100%" class="el_table_style" :header-cell-style="{background:'#eef1f6',color:'#606266'}">
            <el-table-column prop="invite_user_info.nickname" label="邀请人"></el-table-column>
            <el-table-column prop="get_integral" label="获得积分"></el-table-column>
            <el-table-column prop="user_info.nickname" label="下单用户"></el-table-column>
            <el-table-column prop="course_name" label="服务名称">
              <template slot-scope="scope">
                <div v-if="scope.row.order_item.length>0">{{scope.row.order_item[0].course_info.name}}</div>
              </template>
            </el-table-column>
            <el-table-column prop="pay_amount" label="支付金额"></el-table-column>
            <el-table-column prop="" label="支付积分"></el-table-column>
            <el-table-column prop="coupon_reduce_price" label="优惠金额"></el-table-column>
            <el-table-column prop="pay_way_name" label="支付方式"></el-table-column>
            <el-table-column prop="pay_time" label="支付时间"></el-table-column>

            <!--<el-table-column fixed="right" label="操作" width="250px">
              <template slot-scope="scope">
                <el-button size="small" type="primary" @click="getUnitGradeDetail(scope.row.id)">编辑</el-button>
                <el-button size="small" type="danger" @click="delUnitGrade(scope.row.id)">删除</el-button>
              </template>
            </el-table-column>-->
          </el-table>
          <el-col :span="24" class="footer-bar">
            <div class="page-code">
              <el-pagination
                background :page-size="10" layout="prev, pager, next" :total="totalPage" @current-change="pageChange">
              </el-pagination>
            </div>
          </el-col>
        </el-tab-pane>
        <el-tab-pane label="邀请注册" name="second">
          <!--<el-col :span="24" class="action-bar">
            <el-button type="primary" size="medium" style="margin-left:20px;" @click="addBtnReset2">添加</el-button>
          </el-col>-->

          <el-table stripe :data="tableData2" v-loading="tableLoadingShow2" element-loading-text="加载中" style="width: 100%" class="el_table_style" :header-cell-style="{background:'#eef1f6',color:'#606266'}">
            <el-table-column prop="invite_user_info.nickname" label="邀请人"></el-table-column>
            <el-table-column prop="user_info.nickname" label="用户昵称"></el-table-column>
            <el-table-column prop="unit_num" label="用户头像">
              <template slot-scope="scope">
                <img style="width: 50px;height: 50px;border-radius: 50%" :src="scope.row.user_info.photo_url" />
              </template>
            </el-table-column>
            <el-table-column prop="created_at" label="注册时间"></el-table-column>
          </el-table>
          <el-col :span="24" class="footer-bar">
            <div class="page-code">
              <el-pagination
                background :page-size="10" layout="prev, pager, next" :total="totalPage2" @current-change="pageChange2">
              </el-pagination>
            </div>
          </el-col>
        </el-tab-pane>
      </el-tabs>

      <!-- 新增 -->
      <!--<el-dialog :title="dialogTitle" :visible.sync="addFormVisible" width="40%">
        <el-form label-width="80px">
          <el-form-item label="名称">
            <el-input v-model="addForm.name" placeholder="名称"></el-input>
          </el-form-item>
          <el-form-item label="级别">
            <el-input type="number" v-model="addForm.level" placeholder="级别"></el-input>
          </el-form-item>
        </el-form>
        <div style="display: flex;justify-content: center">
          <el-button @click.native="addFormVisible=false">取消</el-button>
          <el-button type="primary" @click="setUnitGrade">{{dialogTitle}}</el-button>
        </div>
      </el-dialog>-->
      <!-- 新增 -->

      <!-- 新增2 -->
      <!--<el-dialog :title="dialogTitle" :visible.sync="addFormVisible2" width="40%">
        <el-form label-width="80px">
          <el-form-item label="名称">
            <el-input v-model="addForm2.name" placeholder="名称"></el-input>
          </el-form-item>
          <el-form-item label="排序">
            <el-input type="number" v-model="addForm2.sort" placeholder="排序"></el-input>
          </el-form-item>
        </el-form>
        <div style="display: flex;justify-content: center">
          <el-button @click.native="addFormVisible2=false">取消</el-button>
          <el-button type="primary" @click="setUnitClassify">{{dialogTitle}}</el-button>
        </div>
      </el-dialog>-->
      <!-- 新增2 -->

    </div>
  </div>
</template>

<script>
  export default {
    name: "level_classify",
    data() {
      return{
        activeName: 'first',
        page: 1,
        totalPage: 0,
        tableData: [],
        tableLoadingShow: false,
        addFormVisible: false,
        addForm: {
          name: '',
          level: '',
          id: ''
        },
        page2: 1,
        totalPage2: 0,
        tableData2: [],
        tableLoadingShow2: false,
        addFormVisible2: false,
        addForm2: {
          name: '',
          sort: '',
          id: ''
        },
        dialogTitle: '添加',
        user_id: ''
      }
    },
    mounted() {
      this.user_id = this.$route.query.id
      this.inviteBuyList();
      this.inviteRegisterList();
    },
    methods: {

      tabsChangeClick(e) {

      },

      //新增按钮重置表单
      addBtnReset(){
        this.dialogTitle = "新增"
        this.addForm.id = '';
        this.addForm.level = "";
        this.addForm.name = '';
        this.addFormVisible = true;
      },

      //获取列表数据
      async inviteBuyList() {
        this.tableLoadingShow = true
        let params = {
          user_id: this.user_id,
          limit: 10,
          page:this.page,
        }
        const res = await this.$api.inviteBuyList(params)
        if(res.data.level=="success"){
          this.tableData = res.data.data
          this.totalPage = res.data.page_info.total
        } else {
          this.$message.error(res.data.message)
        }
        this.tableLoadingShow = false
      },

      /*//添加
      async setUnitGrade() {
        let params = this.addForm
        const res = await this.$api.setUnitGrade(params)
        if(res.data.level=="success"){
          this.addFormVisible = false
          this.inviteBuyList()
          this.$message.success(this.addForm.id?"编辑成功":"添加成功")
        } else {
          this.$message.error(res.data.message)
        }
      },*/

      //获取详情
      async getUnitGradeDetail(id) {
        const loadingOne = this.$loading({
          lock: true,
          text: '加载中...',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        })
        const res = await this.$api.getUnitGradeDetail({id: id})
        if(res.data.level=="success"){
          let data = res.data.data
          this.addForm.id = data.id
          this.addForm.name = data.name
          this.addForm.level = data.level
          this.dialogTitle = "编辑"
          this.addFormVisible = true
        } else {
          this.$message.error(res.data.message)
        }
        loadingOne.close()
      },

      //删除
      async delUnitGrade(id){
        let _this = this;
        const params = {
          id:id,
        }
        //删除
        const judge= this.$confirm('删除该数据?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async() => {
          let res = await this.$api.delUnitGrade(params)
          if(res.data.level=='success'){
            if(this.tableData.length==1&&this.page>1){
              this.page --;
            }
            _this.inviteBuyList();
            this.$message({
              type: 'success',
              message: res.data.message
            });
          }else{
            this.$message({
              type: 'error',
              message: res.data.message
            });
          }
        }).catch(() => {
        });
      },

      //分页
      pageChange(e) {
        this.page = e
        this.inviteBuyList()
      },


      //新增按钮重置表单
      addBtnReset2(){
        this.dialogTitle = "新增"
        this.addForm2.id = '';
        this.addForm2.sort = '';
        this.addForm2.name = '';
        this.addFormVisible2 = true;
      },

      //获取列表数据
      async inviteRegisterList() {
        this.tableLoadingShow2 = true
        let params = {
          user_id: this.user_id,
          limit: 10,
          page:this.page2,
        }
        const res = await this.$api.inviteRegisterList(params)
        if(res.data.level=="success"){
          this.tableData2 = res.data.data
          this.totalPage2 = res.data.page_info.total
        } else {
          this.$message.error(res.data.message)
        }
        this.tableLoadingShow2 = false
      },

      //添加
      async setUnitClassify() {
        let params = this.addForm2
        const res = await this.$api.setUnitClassify(params)
        if(res.data.level=="success"){
          this.addFormVisible2 = false
          this.inviteRegisterList()
          this.$message.success(this.addForm2.id?"编辑成功":"添加成功")
        } else {
          this.$message.error(res.data.message)
        }
      },

      //获取详情
      /*async getUnitClassifyDetail(id) {
        const loadingOne = this.$loading({
          lock: true,
          text: '加载中...',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        })
        const res = await this.$api.getUnitClassifyDetail({id: id})
        if(res.data.level=="success"){
          let data = res.data.data
          this.addForm2.id = data.id
          this.addForm2.name = data.name
          this.addForm2.sort = data.sort
          this.dialogTitle = "编辑"
          this.addFormVisible2 = true
        } else {
          this.$message.error(res.data.message)
        }
        loadingOne.close()
      },*/

      //删除
      async delUnitClassify(id){
        let _this = this;
        const params = {
          id:id,
        }
        //删除
        const judge= this.$confirm('删除该单位分类?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async() => {
          let res = await this.$api.delUnitClassify(params)
          if(res.data.level=='success'){
            if(this.tableData2.length==1&&this.page2>1){
              this.page2 --;
            }
            _this.inviteRegisterList();
            this.$message({
              type: 'success',
              message: res.data.message
            });
          }else{
            this.$message({
              type: 'error',
              message: res.data.message
            });
          }
        }).catch(() => {
        });
      },

      //分页
      pageChange2(e) {
        this.page2 = e
        this.inviteRegisterList()
      },


      // 表头换行
      renderheader(h, { column, $index }) {
        return h('span', {}, [
          h('span', {}, column.label.split('|')[0]),
          h('br'),
          h('span', {}, column.label.split('|')[1])
        ])
      },

    }
  }
</script>


<style lang="scss" scoped>
  h1{
    font-size: 18px;
    color: #333333;
  }
  .list-page{

    .list-page-container{
      padding: 10px;
    }

    .action-bar-input{
      width: 150px;
      margin-left: 14px;
    }
    .action-bar{
      background-color: #f2f2f2;
      height: 60px;
      margin-bottom: 5px;
      box-sizing: border-box;
      display: flex;
      align-items: center;
      padding-left: 20px;
    }
    .footer-bar {
      display: flex;
      justify-content: center;
      align-items: center;
      /*background: #f2f2f2;*/
      padding: 8px 0;
      margin: 10px 0px;
      box-sizing: border-box;
      text-align: center;
    }
  }
  .delete-icon{
    position: fixed;
    right: 50px;
    bottom: 10px;
    font-size: 28px;
    cursor: pointer;
  }
</style>

<style scoped>
  /deep/.el-table td, /deep/.el-table th {
    text-align: center;
  }
  /deep/.el-table .warning-row {
    background: #f8f9fa;
  }

  /deep/.el-table .success-row {
    background: #ffffff;
  }
  /deep/.el_table_style{
    border: 1px solid #dee2e6;
  }
  /deep/.el-table td {
    border: none;
  }
</style>
